<template>
	<view class="gouwuche">
		<headertop title="购物车" str1="oridei" :back1="back1"></headertop>
		<image :src="_static('/images/Rectangle 21541@2x.png')" class="gouwucheback" mode=""></image>
		<view :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">

		</view>
		<view class="allsp">
			<view class="topline">
				<view class="t1">
					全部商品({{list.length}})
				</view>
				<view class="t2" @click="ll" v-if="list.length">
					{{flag?'退出管理':'管理购物车'}}
				</view>
			</view>
		</view>
		<view class="gouwuchebox">
			<view class="msgicon" v-if="!list.length">
				<image :src="_static('/images/wxnone.png')" mode="widthFix">
				</image>
				<view class="msgtext">
					暂无商品
				</view>
			</view>
			<scroll-view class="scrowx" :scroll-x="true" v-for="(item,index) in list" :key="index"
				:scroll-left="item.scrollLeft" v-else>
				<view style="width: 100%;display: inline-block;">
					<view class="gouwuchebox_item">
						<image
							:src="item.bool?_static('/images/Group 11730@2x.png'):_static('/images/Ellipse 31@2x.png')"
							@click.stop="item.bool=!item.bool" class="checkiocn" mode=""
							v-if="item.status=='normal'||flag"></image>
						<image :src="_static('/images/Ellipse 2226@2x.png')" class="checkiocn" mode=""
							v-if="item.status!='normal'&&!flag"></image>
						<view class="spt">
							<image :src="item.sku_price.image||item.goods.image" @click="gopage(item)" mode=""
								class="sptimg">
							</image>
							<view class="zzc" v-if="item.status=='down'">
								<span>已下架</span>
							</view>
						</view>
						<view class="texts" @click="gopage(item)">
							<view class="t1">
								{{item.goods.title}}
							</view>
							<view class="ms">
								{{item.goods.subtitle}}
							</view>

							<view class="jiageline">
								<view class="jiage">
									￥{{jigaefun(item.goods.price[0])}}.<span
										style="font-size: 20rpx;">{{jigaefun(item.goods.price[0],'后')}}</span>
								</view>
								<view class="gnq" v-if="item.status=='normal'">
									<image :src="_static('/images/removejian.png')" @click.stop="add('-',item)"
										class="bod" mode="">
									</image>
									<span>{{item.goods_num}}</span>
									<image :src="_static('/images/Group 11462@2x.png')" @click.stop="add('+',item)"
										class="bod" mode=""></image>
								</view>
								<view style="font-weight: 500;font-size: 24rpx;color: #1D2129;" v-else>
									商品已不能购买，请联系卖家
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 		<image src="@/static/images/scsc.png" @click.stop="itemshanchu(item)" style="width: 80rpx;height: 80rpx;
				margin-left: 60rpx;display: inline-block;" mode=""></image> -->
			</scroll-view>
		</view>
		<view class="fixedbox" v-if="list.length">
			<view class="center">
				<view class="qxbox">
					<view class="line" @click="allquanx">
						<image :src="flag1?_static('/images/Group 11730@2x.png'): _static('/images/Ellipse 31@2x.png')"
							mode=""></image>
						<span>全选</span>
					</view>
					<view class="hejitext">
						<span style="color: #86909C;">合计</span>
						<span style="color: #F53F3F;font-size:20rpx ;">￥</span>
						<span style="color: #F53F3F;font-size: 32rpx;">{{jigaefun(alljiage)}}.</span>
						<span style="color: #F53F3F;font-size:20rpx ;">{{jigaefun(alljiage,'后')}}</span>
					</view>
				</view>
				<view class="jiesuanbtn" @click="jiesuan">
					{{flag?'删除':'结算'}}<span v-if="xzs">（{{xzs}}）</span>
				</view>
			</view>
		</view>
		<view class="" style="height: 130rpx;">

		</view>

	</view>
</template>
<script setup>
	import {
		_static
	} from '@/ulm/utils/url.js'
	import headertop from '@/components/header.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import ulm, {
		$api
	} from '@/ulm';
	import {
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app'
	const barHeight = ref('')
	const denglu = ref(null)
	const loading = ref(false)
	const type = ref('express')
	const list = ref([{

	}])
	const flag1 = ref(false)
	const flag = ref(false)
	const scrollLeft = ref('')
	const statusBarHeight = ref('')
	const alljiage = computed(() => {
		var arr1 = list.value.filter(item => item.bool == true)
		var jiage = arr1.reduce((e, item) => {
			return e + item.sku_price.price * item.goods_num
		}, 0)
		return jiage
	});
	const xzs = computed(() => {
		var arr1 = list.value.filter(item => item.bool == true)
		return arr1.length
	});
	onShow(() => {
		flag1.value = false
		initlist()
	})

	function gopage(item) {
		if (item.status == 'down') return
		uni.navigateTo({
			url: '/pages/home/shangpdetail?id=' + item.goods.id
		})
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;

	})

	function jiesuan() {
		// 删除
		if (flag.value) {
			shanchu()
		} else {
			var arr1 = list.value.filter(item => item.bool == true)
			if (!arr1.length) {
				uni.showToast({
					title: '请选结算商品',
					icon: 'none'
				})
				return
			}
			uni.setStorageSync('gouwc', arr1)
			uni.navigateTo({
				url: '/sub_shoppingmal/index/querendingdan?type=' + type.value + '&typestr=购物车'
			})
		}
	}

	function ll() {
		flag.value = !flag.value
	}

	function allquanx() {
		flag1.value = !flag1.value
		for (var i in list.value) {
			if (list.value[i]['status'] == 'down' && !flag.value) {

			} else {
				list.value[i]['bool'] = flag1.value
			}
		}
	}
	async function add(type, item) {
		if (loading.value) return
		loading.value = true
		var obj = {
			goods_id: item.goods.id,
			goods_num: 1,
			goods_sku_price_id: item.sku_price.id,
			type: type == '+' ? 'inc' : 'dec'
		}
		if (obj.type == 'dec') {
			if (item.goods_num == 1) return
		}
		if (obj.type == 'inc') {
			if (item.goods_num >= item.sku_price.stock) {
				uni.showToast({
					title: '商品库存不足',
					icon: 'none'
				})
				loading.value = false
				return
			}
		}
		const res = await $api.cartupdate(obj)
		if (res.code == 1) {
			flag1.value = false
			initlist()
			loading.value = false
		} else {
			loading.value = false
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function skufun(str) {
		if (!str) {
			return []
		}
		return str.split(',')
	}

	function itemshanchu(item) {
		uni.showModal({
			title: '提示', // 标题（可选）
			content: '确定要删除吗？', // 内容（可选）
			confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
			cancelText: '取消', // 取消按钮文字（可选，默认“取消”）
			success: (res) => {
				if (res.confirm) {
					sc(item)
					// 执行确定后的逻辑
				} else if (res.cancel) {
					// 执行取消后的逻辑
				}
			},
			fail: (err) => {}
		});
	}
	async function sc(item) {
		const res = await $api.cartDelete({
			id: item.id
		})
		if (res.code == 1) {
			setTimeout(() => {
				uni.showToast({
					title: '删除成功'
				})
			}, 500)
			initlist()
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function shanchu() {
		var arr1 = list.value.filter(item => item.bool == true)
		if (!arr1.length) {
			uni.showToast({
				title: '请选择删除商品',
				icon: 'none'
			})
			return
		}
		uni.showModal({
			title: '提示', // 标题（可选）
			content: '确定要删除吗？', // 内容（可选）
			confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
			cancelText: '取消', // 取消按钮文字（可选，默认“取消”）
			success: (res) => {
				if (res.confirm) {
					shanchu1()
					// 执行确定后的逻辑
				} else if (res.cancel) {
					// 执行取消后的逻辑
				}
			},
			fail: (err) => {}
		});

	}

	async function shanchu1() {
		var arr1 = list.value.filter(item => item.bool == true)
		var gids = arr1.map(item => item.id)
		const res = await $api.cartDelete({
			id: gids.join()
		})
		if (res.code == 1) {
			setTimeout(() => {
				uni.showToast({
					title: '删除成功'
				})
			}, 500)
			initlist()
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function qiehuan(str) {
		if (type.value == str) return
		flag1.value = false
		type.value = str
		initlist()
	}
	async function initlist() {
		const res = await $api.cartnum()
		if (res.code == 1) {
			list.value = []
			list.value = res.data
			for (var i in list.value) {
				list.value[i]['scrollLeft'] = 0
				list.value[i]['bool'] = false
			}
		}
	}

	function jigaefun(str1, strr) {
		let number = Number(str1).toFixed(2)
		let str = number.toString(); // 转换为字符串 "100.00"
		let parts = str.split('.'); // 按小数点分割
		let integerPart = parts[0]; // "100"
		let decimalPart = parts[1] || "00"; // "00"（如果没有小数部分，默认 "00"）
		if (!strr) {
			return integerPart
		} else {
			return decimalPart
		}
	}
</script>

<style lang="scss">
	.fixedbox {
		width: 100%;
		height: 184rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		box-shadow: 0rpx -4rpx 13rpx 0rpx rgba(0, 0, 0, 0.03);

		.center {
			width: 686rpx;
			margin: auto;
			display: flex;
			align-items: center;
			margin-top: 22rpx;

			.jiesuanbtn {
				width: 358rpx;
				height: 88rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
				margin-left: 156rpx;
			}

			.qxbox {
				width: 200rpx;

				.line {
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #4E5969;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
				}

				.hejitext {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #86909C;
					margin-top: 12rpx;
				}
			}
		}
	}

	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.gouwuche {
		width: 100%;
		overflow: hidden;
		position: relative;

		.gouwucheback {
			position: absolute;
			width: 100%;
			height: 332rpx;
			z-index: -1;
		}


		.gouwuchebox {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(255, 216, 166, 0.29);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			overflow: hidden;
			padding: 32rpx 0;
			overflow-y: scroll;
			height: 55vh;

			.scrowx {
				width: 686rpx;
				margin: auto;
				white-space: pre;
			}

			&_item {
				width: 100%;
				display: flex;
				padding: 28rpx 0;
				align-items: center;
				border-bottom: 2rpx solid #F7F8FA;
				overflow: hidden;

				.yajinbox {
					display: flex;
					align-items: center;
					margin-top: 14rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #86909C;
					justify-content: space-between;
				}

				.checkiocn {
					width: 32rpx;
					height: 32rpx;
				}

				.spt {
					width: 146rpx;
					height: 146rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-left: 26rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					position: relative;

					.sptimg {
						width: 146rpx;
						height: 146rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}

					.zzc {
						width: 146rpx;
						height: 146rpx;
						position: absolute;
						background: rgba(0, 0, 0, 0.5);
						text-align: center;
						line-height: 146rpx;
						color: #FFFFFF;
						font-size: 24rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}
				}

				.texts {
					width: 464rpx;
					margin-left: 20rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏溢出的内容 */
					text-overflow: ellipsis;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #1D2129;
						display: initial;
					}

					.ms {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #4E5969;
						margin-top: 14rpx;
					}

					.jiageline {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 12rpx;

						.jiage {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #F53F3F;
						}

						.gnq {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #4E5969;
							width: 120rpx;
						}

						.bod {
							width: 34rpx;
							height: 34rpx;
							background: #D1986F;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							border-radius: 50%;
							font-size: 30rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							color: #FFFFFF;
						}
					}
				}
			}
		}

		.allsp {
			width: 686rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 28rpx;
			margin-bottom: 18rpx;

			.topline {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #4E5969;
					display: initial;
				}

				.t2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #1D2129;
					display: initial;
				}
			}
		}

		.btnss {
			width: 686rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;

			.btn {
				width: 326rpx;
				height: 72rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #A46F3A;
				text-align: center;
				line-height: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #A46F3A;
			}

			.btn1 {
				width: 328rpx;
				height: 72rpx;
				background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(142, 85, 29, 0.44);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}

		.headertop {
			width: 100%;
			position: fixed;
			top: 0%;
			overflow: hidden;
			transition: 0.5s;
			z-index: 9999;

			.box {
				width: 100%;
				display: flex;
				align-items: center;

				.pagelefticon {
					width: 152rpx;
					height: 40rpx;
					margin-left: 32rpx;
				}
			}
		}
	}
</style>